<template>
  <div class="app-container">
    
    <el-form label-width="120px">
      <el-form-item label="用户名称">
        <el-input v-model="user.username" required />
      </el-form-item> 

      
       <el-form-item label="企业名称">
        <el-input v-model="user.internshipName" required />
      </el-form-item> 


      <el-form-item label="密码">
        <el-input type="password" required v-model="user.password" />
      </el-form-item>



      <el-form-item label="类型">
        <el-select v-model="user.type"  clearable placeholder="请选择">
          <el-option :value=3 label="实习单位" />
        </el-select>
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="user.email" type="email" required />
      </el-form-item>

      <el-form-item label="手机">
        <el-input v-model="user.mobilephone" type="tel" required />
      </el-form-item>

      <el-form-item label="地理信息">
        <el-input v-model="user.locationInfo" :disabled="disabledFlag" />
      </el-form-item>

      <el-form-item label="公司简介">
        <el-input v-model="user.internshipIntroduce" :disabled="disabledFlag" />
      </el-form-item>

      <!-- <el-form-item label="实习单位简介">
        <el-input v-model="user.intro" :rows="10" type="textarea" />
      </el-form-item> -->

      <!-- 头像：TODO -->
      
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userApi from "@/api/user";
import internApi from "@/api/internship"
export default {
  data() {
    return {
      user: {
        username: "",
        type: 3,
        password: "",
        sex: "",
        department: "",
        grade: "",
        email: "",
        mobilephone: "",
        
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
      disabledFlag: false,
    };
  },
  created() {
    // 页面渲染之前执行
    this.init();
  },
  watch: {
    //监听
    $route(to, from) {
      // console.log(to)
      // console.log(from)
      //路由变化方式，路由发生变化，方法就会执行
      this.init();
    }

  },
  methods: {
    init() {
      //判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id;
        //调用根据id查询的方法
        this.getInfo(id);
      } else {
        //路径没有id值，做添加
        //清空表单
        this.user = {};
      }
    },
    //获取用户信息
    getInfo(id) {
      console.log(id)
      internApi.getInternship(id).then((response) => {
        this.user = response.data.internshipUser;
        console.log(user)
      });
    },

    saveOrUpdate() {
      //判断修改还是添加
      //根据user是否有id
      if (!this.user.id) {
        //添加
        this.saveInternship();
      } else {
        //修改
        this.updateInternship();
      }
    },

    saveInternship() {
      internApi.addInternship(this.user).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push({ path: "/internship/list" });
      });
    },
    

    updateInternship() {
      internApi.updateInternInfo(this.user).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push({ path: "/internship/list" });
      });
    },
  },
};
</script>

<style>
</style>